import React from "react";
import { Form, Select, Input, Button, Table, Space, } from "antd";
const { Option } = Select;

const Tabs3 = () => {
    const { form } = Form.useForm();

    const columns = [
        {
            title: "序号",
            dataIndex: "num",
            key: "num",
            align: 'center',
        },
        {
            title: "小区名称",
            dataIndex: "name",
            key: "name",
            align: 'center',
        },
        {
            title: "标题",
            dataIndex: "title",
            key: "title",
            align: 'center',
        },
        {
            title: "面积",
            dataIndex: "measure",
            key: "measure",
            align: 'center',
            render: (text) => <span>{text}㎡</span>
        },
        {
            title: "总价",
            key: "allPrice",
            dataIndex: "allPrice",
            align: 'center',
            render: (text) => <span>{text}万</span>
        },
        {
            title: "排序",
            dataIndex: "sort",
            key: "sort",
            align: 'center',
        },
        {
            title: "状态",
            dataIndex: "state",
            key: "state",
            align: 'center',
            render: (text) => <span>{text ? '审核完成' : '待审核'}</span>
        },
        {
            title: "操作",
            key: "action",
            align: 'center',
            render: (text, record) => (
                <Space size="middle">
                    <Button type='text'>审核</Button>
                    <Button type='text'>编辑</Button>
                    <Button type='text'>删除</Button>
                </Space>
            ),
        },
    ];
    const data = [
        {
            num: "1",
            name: "珑城半山公馆",
            title: '滨海国际小区',
            measure: '111',
            allPrice: '21',
            sort: '50',
            state: 0,
            key: '1'
        },
        {
            num: "2",
            name: "珑城半山公馆",
            title: '滨海国际小区',
            measure: '111',
            allPrice: '21',
            sort: '50',
            state: 0,
            key: '2'
        },
        {
            num: "3",
            name: "珑城半山公馆",
            title: '滨海国际小区',
            measure: '111',
            allPrice: '21',
            sort: '50',
            state: 0,
            key: '3'
        },
    ];
    const onGenderChange = () => { };
    return (
        <div className="exam_tabs">
            <Form layout="inline" form={form}>
                <Form.Item>
                    <Select placeholder="请选择省份" onChange={onGenderChange} allowClear>
                        <Option value="male">山西省</Option>
                        <Option value="female">湖南省</Option>
                        <Option value="other">广东省</Option>
                    </Select>
                </Form.Item>
                <Form.Item>
                    <Select placeholder="请选择城市" onChange={onGenderChange} allowClear>
                        <Option value="male">运城市</Option>
                        <Option value="female">怀化市</Option>
                        <Option value="other">深圳市</Option>
                    </Select>
                </Form.Item>
                <Form.Item>
                    <Select placeholder="请选择区县" onChange={onGenderChange} allowClear>
                        <Option value="male">盐湖区</Option>
                        <Option value="female">耀县</Option>
                        <Option value="other">南山区</Option>
                    </Select>
                </Form.Item>
                <Form.Item>
                    <Input placeholder="关键字" />
                </Form.Item>
                <Form.Item>
                    <Button type="primary">搜索</Button>
                </Form.Item>
            </Form>

            <Table bordered columns={columns} dataSource={data} />
        </div>
    );
};

export default Tabs3;